<template>
  <div class="box-wrap">
    <div class="errorTip" style="background-color: white" v-if="showTip">
      <img src="@/assets/exclamation.png" alt="" />
      <span>人数已满，是否强制他人退出</span>
      <div class="btn-bottom">
        <el-button class="eig-btn" type="primary" @click="confirm"
          >确认</el-button
        >
        <el-button
          style="margin-left: 10px !important"
          @click="cancel"
          class="eig-btn eig-default-btn"
          type="primary"
          >取消</el-button
        >
      </div>
    </div>
    <img class="interactive" src="@/assets/interactive.png" alt="" />
    <div class="box-list">
      <div
        style="background-color: rgba(225, 250, 248, 1)"
        class="box"
        @click="go('TalkDhA')"
      >
        <img class="problem-img" src="@/assets/noProblem.png" alt="" />
        <div class="box-desc">
          <span>无问题对话</span>
          <p>自然交流，无问答，注重交流分享</p>
        </div>
      </div>
      <div
        style="background-color: rgba(233, 245, 254, 1)"
        class="box"
        @click="go('TalkDhAi')"
      >
        <img class="problem-img" src="@/assets/problem.png" alt="" />
        <div class="box-desc">
          <span>有问题对话</span>
          <p>问答明确，信息交换，直接沟通需求</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTip: false,
      path: "TalkDhA",
    };
  },
  mounted() {
    // this.init();
  },
  methods: {
    init() {
      this.ws = new WebSocket("ws://172.20.10.2:9000");
      this.ws.onopen = () => {
        console.log("连接打开");
        setTimeout(() => {
          this.ws.send("您好！");
        }, 3000);
      };

      this.ws.onmessage = (e) => {
        console.log("收到消息：" + e.data);
      };

      this.ws.onerror = (event) => {
        console.log("event", event);
      };
    },
    go(path) {
      this.path = path;
      if (path == "TalkDhA") {
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
          navigator.mediaDevices
            .getUserMedia({ audio: true })
            .then((media) => {
              this.goTalk();
            })
            .catch((err) => {
              this.$message.error(err.message);
            });
        } else {
          this.$message.error("当前浏览器不支持录音功能");
        }
      } else {
        this.goTalk();
      }
    },
    goTalk() {
      localStorage.setItem("home", true);
      this.timer = setTimeout(() => {
        this.$message.error("网络超时，请稍后再试！");
      }, 5000);
      this.$axios
        .get("/api2/onlineCount")
        .then((res) => {
          this.timer && clearTimeout(this.timer);
          if (!res.data.data.onlineCount) {
            this.$router.push({
              path: this.path,
            });
          } else {
            this.showTip = true;
            // this.$message.error("人数已满，请稍后再试！");
          }
        })
        .catch((err) => {
          this.timer && clearTimeout(this.timer);
          this.$message.error(err.message);
        });
    },
    confirm() {
      this.$axios.get("/api2/disconnect_all").then((res) => {
        this.goTalk();
      });
    },
    cancel() {
      this.showTip = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.btn-bottom {
  display: flex;
  align-items: center;
}
.problem-img {
  width: 50px;
  margin-right: 20px;
}
.box-list {
  position: absolute;
  top: 48%;
  padding: 0 25px;
  width: 100%;
  left: 0px;
  .box:first-child {
    margin-bottom: 20px;
  }
}
.box-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  height: 100%;
  width: 100%;
  .box {
    cursor: pointer;
    width: 100%;
    padding: 30px 0;
    border-radius: 10px;
    background-color: aliceblue;
    display: flex;
    align-items: center;
    justify-content: center;
    .box-desc {
      & > span {
        color: rgba(51, 51, 51, 1);
        font-weight: bold;
        font-size: 18px;
      }
      & > p {
        font-size: 12px;
        margin: 0;
        margin-top: 5px;
        color: rgba(85, 85, 85, 1);
      }
    }
  }
}
</style>
